import React from 'react'
import './Header.scss'
// import next from '@/assets/fonts/next.svg'
import next from '@/assets/fonts/next.svg'
import prev from '@/assets/fonts/prev.svg'
import search from '@/assets/fonts/search.svg'
import {useSelector,useDispatch} from 'react-redux'
import { RootState } from '@/modules/RootState'
import { changeHidden } from '@/store/login'
import { getKey } from '@/utils/api'
import { Message } from 'element-react';

interface HeaderProps{
    className:string
}

const Header = ({className}:HeaderProps) =>{
    const state = useSelector((state:RootState)=>state.login)
    const user = useSelector((state:RootState)=>state.user)

    const dispatch = useDispatch()

    const showLogin = () =>{        
        dispatch(getKey())
        dispatch(changeHidden(state.hidden))
    }

    const open = () =>{
        Message({
            message: '恭喜你，这是一条成功消息',
            type: 'success'
        });
    }

    return(
        <div className={`header-container ${className}`}>
            <div className="header-left">
                <div className="header-logo">
                    <img src="src/assets/logo.jpg" alt="" />
                    <span className="header-logo3">react音乐播放器</span>
                </div>
                <div className="header-search">
                    <img className="svg" src={prev} alt="" />
                    <img className="svg" src={next} alt="" />
                    <div className='inputSearch'>
                        <div className='searchSvg'>
                            <img className='svg2' src={search} alt="" />
                        </div>
                        <input type="text" />
                    </div>
                </div>
            </div>
            <div className="header-right" onClick={()=>open()}>
                退出登录
            </div>
            <div className="header-right">
                <img src="src/assets/王冰冰.jpg" alt="" onClick={()=>showLogin()} />
                <span className='user-name' onClick={()=>showLogin()}>
                    {
                        Object.keys(user.userAccount).length !== 0 ? user.userAccount.nickname : '请登录'
                    }
                </span>
            </div>
        </div>
    )
}

export default React.memo(Header)  